<template>

  <div class="aftrer-sale-list-page" style="width:100%;  "
       ref="scrollOuter">

    <div style=" width: 100%">
      <!--订单列表-->
      <div>
        <order-list-item
          ref="orderList"
          v-if="orderInfo && orderInfo.length>0"
          :orderListInfor="item"
          v-for="(item, index) in orderInfo"
          :key="index">
        </order-list-item>
      </div>
      <!--订单列表 end-->


      <div v-if="isOnLoad && totalCount > orderInfo.length "
           style="color:#9a9a9a ;height:2rem!important;  width: 100%;text-align: center;  line-height: 2rem;vertical-align: middle ; background:rgb(207,207,207) ;font-weight: 600;margin-top: -1rem"
           @click.self="changeFloat">
        <span style="position: relative">
          <LoadMoreAnimate backgroundColor="rgb(207,207,207)"
                           style="position: absolute;left:0;transform: translateX(-100%)">
          </LoadMoreAnimate>加载更多</span>
      </div>

      <div v-if="orderInfo.length <= 0" class="centent" style="">
        <div class="no_data">
          <img src="static/image/no_order.png" style="width:70%;">
          <p>暂无相关数据</p>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import OrderListItem from "@/real-components/AfterSaleList"
  import TranslateGroup from "@/real-components/TranslateMain"
  import {getOrder, querySubmitedInfor, selectAfterSalesPageList} from "@/utils/ReturnAxios"
  import LoadMoreAnimate from '@/real-components/LoadMoreAnimate';
  import PageFoot from "@/real-components/PageFoot"
  import axios from "axios"
  import {showLoading, hideLoading} from "@/utils/loading";
  import {translateDetailData} from "@/utils/TranslateDetailDate"

  export default {
    data() {
      return {
        pageSize: 10,
        pageNum: 0,
        totalPageCount: 1,
        isOnLoad: false,
        isOnloadingMore: false,
        totalCount: 0,
        elements: null,
        orderInfo: []
      }
    },
    components: {
      OrderListItem,//优惠商品展示组件
      TranslateGroup, //左右滑动组件
      PageFoot,
      LoadMoreAnimate
    },
    props: {
      //传递分类名称的参数
      lengths: {
        type: Number,
        default: 2,
      },
      discountList: {
        type: Array,
        default: () => {
          return [{
            isReceived: false,
            allPrice: parseInt(100),
            offPrice: parseInt(6)
          },
            {
              isReceived: false,
              allPrice: parseInt(100),
              offPrice: parseInt(5)
            }
          ]
        }
      },
      scrollY: {
        type: Number,
        default: 0,
      }
    },
    methods: {
      savePagePosition() {
        var option = {
          orderLength: this.orderInfo.length,
          pagePosition: this.scrollY,
          index: 1
        }
        return option
      },

      loadMore() {
        if (this.isOnloadingMore || this.orderInfo.length >= this.totalCount) {
          return
        }
        this.pageNum++
        this.querySubmitedInfor()
      },
      initStateList() {
        //根据状态值 获取状态名称
        var stateList = new Map(
          [
            [0, ""],
            [1, "已提交申请"],
            [2, "申请成功"],
            [3, "申请失败"],
            [4, "运营审批通过"],
            [5, "运营审批拒绝"],
            [6, "退货申请提交"],
            [7, "退货审核通过"],
            [8, "退货审核拒绝"],
            [9, "财务通过"],
            [10, "财务拒绝"],
            [11, "退款中"],
            [12, "退款成功"],
            [13, "退款失败"],
            [14, "服务商审核通过"],//服务商审核通过
            [15, "服务商审核拒绝"],// 服务商审核拒绝
          ])
        this.stateList = stateList
      },
      //申请已售后的列表信息获取 "f9493bafb80e4729aab3c291fbf9bccf"
      async querySubmitedInfor(length, isFirst) {
        this.isOnloadingMore = true
        var pageSize = this.pageSize
        var start = Math.max(this.orderInfo.length, 0)
        if (isFirst) {
          pageSize = Math.max(length, 10)
        }
        var res = await selectAfterSalesPageList(`start=${start}&length=${pageSize}`, this.sessionId)
        this.$emit('clearLoading', 0)
        this.isOnloadingMore = false
        this.isOnLoad = true
        res = res.data
        if (res.returncode == 0) {
          Toast({
            message: res.errmsg,
            type: "fail"
          })
          return
        }
        res = res.data[0]
        this.totalCount = res.totalCount
        this.$emit('afterSaleListCount', res.totalCount)
        this.orderInfo.push(...this.afterSaleHistory(res.results))
        // this.$nextTick(() => {
        //
        //   this.$refs.orderList.map((item) => {
        //   })
        // })
      },

      //已申请售后数据数据格式转换
      afterSaleHistory(data) {
        var afterSaledInfors = [];
        var data = data.sort((a, b) => {
          return b.applyTm - a.applyTm
        })
        for (var afterSaledInfor  of data) {
          var goodsDetail = afterSaledInfor.goodsList.find((item) => {
            return item.buyType == 1
          }) || afterSaledInfor.goodsList.find((item) => {
            return item.buyType == 2
          }) || afterSaledInfor.goodsList.find((item) => {
            return item.buyType == 4
          }) || {}
          Object.assign(afterSaledInfor, goodsDetail)
          var goodsUnit = afterSaledInfor.goodsSpec || ''
          afterSaledInfor.goodsUnit = goodsUnit

          afterSaledInfor.serviceStateName = this.stateList.get(parseInt(afterSaledInfor.serviceState || 0))
          var retAfterSaledInfor = {
            orderDetails: [afterSaledInfor],
            orderNo: afterSaledInfor.orderNo || "00000000",
            orderType: afterSaledInfor.orderType,
            createTm: afterSaledInfor.createTime || afterSaledInfor.orderCreateTm || new Date().getTime(),
            logisticsStatus: this.logisticsStatus || 1,
          }
          afterSaledInfors.push(retAfterSaledInfor)
        }
        return afterSaledInfors
      },
    },
    watch: {
      orderInfo() {
        this.$nextTick(() => {
          this.$emit('refresh')
        })
      }

    },

    computed: {
      //从vuex获取当前的页面index
      activeIndex() {
        return this.$store.state.cjy.classifyIndex
      },
      showOrder() {
        return this.orderInfo
      },
      sessionId() {
        return this.$store.state.wxh.sessionId || localStorage.getItem('sessionId')
      },
    },
    mounted() {
      this.elements = this.$refs.scrollOuter
      this.$refs.scrollOuter.addEventListener("scroll", () => {
      })

    },
    async created() {
      this.initStateList()
      var afterSaleListOption = await localforage.getItem('afterSaleList')
      if (afterSaleListOption) {
        afterSaleListOption = afterSaleListOption.find(item => {
          return item.index == 1
        })
        var orderLength = afterSaleListOption.orderLength

        this.pageNum = Math.ceil(orderLength / this.pageSize)
        this.querySubmitedInfor(orderLength, true)
      } else {
        this.querySubmitedInfor(this.pageNum)
      }

    }
  }
</script>

<style>
  .goleft-enter-active, .goleft-leave-active, .goright-enter-active, .goright-leave-active {
    transition: all 0.5s;
  }

  .goleft-enter, .goright-leave-to {
    transform: translatex(100%);
    opacity: 0.8
  }

  .goleft-leave-to, .goright-enter {
    transform: translatex(-100%);
    opacity: 0.8
  }

  .coupon_collection {
    width: auto;
    height: 3.8rem;
  }
</style>
